<template>
  <div>
    <div id="charts11_2" ref="charts11_2" style="height: 400px;"></div>
  </div>
</template>
<script>
  import '@/comcom/amcharts/dist/amcharts/amcharts'
  import '@/comcom/amcharts/dist/amcharts/serial'
  var basic = {
    default: '#000',
    defaultText: '#000',
    border: '#dddddd',
    borderDark: '#aaaaaa',
  };

  // main functional color scheme
  var colorScheme = {
    primary: '#209e91',
    info: '#2dacd1',
    success: '#90b900',
    warning: '#dfb81c',
    danger: '#e85656',
  };

  // dashboard colors for charts
  var dashboardColors = {
    blueStone: '#005562',
    surfieGreen: '#0e8174',
    silverTree: '#6eba8c',
    gossip: '#b9f2a1',
    white: '#10c4b5',
  };

  //SASS mix function
  function mix(color1, color2, weight) {
    // convert a decimal value to hex
    function d2h(d) {
      return d.toString(16);
    }
    // convert a hex value to decimal
    function h2d(h) {
      return parseInt(h, 16);
    }

    var result = "#";
    for(var i = 1; i < 7; i += 2) {
      var color1Part = h2d(color1.substr(i, 2));
      var color2Part = h2d(color2.substr(i, 2));
      var resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
      result += ('0' + resultPart).slice(-2);
    }
    return result;
  }

  var colorHelper = {
    tint: function(color, weight) {
      return mix('#dddddd', color, weight);
    },
    shade: function(color, weight) {
      return mix('#000000', color, weight);
    },
  }

  var IMAGES_ROOT = '/static/img/dragIconRoundBig.png';
  var layoutPaths = {
      images: {
        root: IMAGES_ROOT,
        profile: IMAGES_ROOT + 'app/profile/',
        amMap: '/static/img/',
        amChart: '/static/img/'
      }
    }
  var layoutColors = {
    default: basic.default,
    defaultText: basic.defaultText,
    border: basic.border,
    borderDark: basic.borderDark,

    primary: colorScheme.primary,
    info: colorScheme.info,
    success: colorScheme.success,
    warning: colorScheme.warning,
    danger: colorScheme.danger,

    primaryLight: colorHelper.tint(colorScheme.primary, 30),
    infoLight: colorHelper.tint(colorScheme.info, 30),
    successLight: colorHelper.tint(colorScheme.success, 30),
    warningLight: colorHelper.tint(colorScheme.warning, 30),
    dangerLight: colorHelper.tint(colorScheme.danger, 30),

    primaryDark: colorHelper.shade(colorScheme.primary, 15),
    infoDark: colorHelper.shade(colorScheme.info, 15),
    successDark: colorHelper.shade(colorScheme.success, 15),
    warningDark: colorHelper.shade(colorScheme.warning, 15),
    dangerDark: colorHelper.shade(colorScheme.danger, 15),

    dashboard: {
      blueStone: dashboardColors.blueStone,
      surfieGreen: dashboardColors.surfieGreen,
      silverTree: dashboardColors.silverTree,
      gossip: dashboardColors.gossip,
      white: dashboardColors.white,
    },
  }

  export default {
    mounted() {
      this.drawchart()
    },
    data() {
      return {}},
    methods: {
      drawchart() {
        var id = 'charts11_2'
        var chart = AmCharts.makeChart(id, {
          "type": "serial",
          "theme": "white",
          "color": layoutColors.defaultText,
          "dataDateFormat": "YYYY-MM-DD",
          "precision": 2,
          "valueAxes": [{
            color: layoutColors.defaultText,
            axisColor: layoutColors.defaultText,
            gridColor: layoutColors.defaultText,
            "id": "v1",
            "title": "问诊量",
            "position": "left",
            "autoGridCount": false,
            "labelFunction": function(value) {
              return  + Math.round(value) ;
            }
          }, {
            color: layoutColors.defaultText,
            axisColor: layoutColors.defaultText,
            gridColor: layoutColors.defaultText,
            "id": "v2",
            "title": "同类型医生平均问诊量",
            "gridAlpha": 0,
            "position": "right",
            "autoGridCount": false
          }],
          "graphs": [{
            "id": "g3",
            color: layoutColors.defaultText,
            "valueAxis": "v1",
            "lineColor": layoutColors.primaryLight,
            "fillColors": layoutColors.primaryLight,
            "fillAlphas": 0.8,
            "lineAlpha": 0.8,
            "type": "column",
            "title": "好大夫问诊",
            "valueField": "sales2",
            "clustered": false,
            "columnWidth": 0.5,
            "lineColorField" : layoutColors.defaultText,
            "legendValueText": "[[value]]",
            "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
          }, {
            "id": "g4",
            "valueAxis": "v1",
            color: layoutColors.defaultText,
            "lineColor": layoutColors.primary,
            "fillColors": layoutColors.primary,
            "fillAlphas": 0.9,
            "lineAlpha": 0.9,
            "type": "column",
            "title": "微医问诊",
            "valueField": "sales1",
            "clustered": false,
            "columnWidth": 0.3,
            "legendValueText": "[[value]]",
            "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
          }, {
            "id": "g1",
            "valueAxis": "v2",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": layoutColors.defaultText,
            color: layoutColors.defaultText,
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "lineColor": layoutColors.danger,
            "type": "smoothedLine",
            "title": "同类型医生平均问诊量",
            "useLineColorForBulletBorder": true,
            "valueField": "market1",
            "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
          }, {
            "id": "g2",
            "valueAxis": "v2",
            color: layoutColors.defaultText,
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": layoutColors.defaultText,
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "lineColor": layoutColors.warning,
            "type": "smoothedLine",
            "dashLength": 5,
            "title": "总问诊量",
            "useLineColorForBulletBorder": true,
            "valueField": "market2",
            "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
          }],
          "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis": false,
            "offset": 30,
            gridAlpha: 0,
            color: layoutColors.defaultText,
            scrollbarHeight: 50,
            backgroundAlpha: 0,
            selectedBackgroundAlpha: 0.05,
            selectedBackgroundColor: layoutColors.defaultText,
            graphFillAlpha: 0,
            autoGridCount: true,
            selectedGraphFillAlpha: 0,
            graphLineAlpha: 0.2,
            selectedGraphLineColor: layoutColors.defaultText,
            selectedGraphLineAlpha: 1
          },
          "chartCursor": {
            "pan": true,
            "cursorColor" : layoutColors.danger,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.2
          },
          "categoryField": "date",
          "categoryAxis": {
            "axisColor": layoutColors.defaultText,
            "color": layoutColors.defaultText,
            "gridColor": layoutColors.defaultText,
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": true
          },
          "legend": {
            "useGraphSettings": true,
            "position": "top",
            "color": layoutColors.defaultText
          },
          "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
          },
          "export": {
            "enabled": true
          },
          "dataProvider": [{
            "date": "2013-01-16",
            "market1": 71,
            "market2": 75,
            "sales1": 5,
            "sales2": 8
          }, {
            "date": "2013-01-17",
            "market1": 74,
            "market2": 78,
            "sales1": 4,
            "sales2": 6
          }, {
            "date": "2013-01-18",
            "market1": 78,
            "market2": 88,
            "sales1": 5,
            "sales2": 2
          }, {
            "date": "2013-01-19",
            "market1": 85,
            "market2": 89,
            "sales1": 8,
            "sales2": 9
          }, {
            "date": "2013-01-20",
            "market1": 82,
            "market2": 89,
            "sales1": 9,
            "sales2": 6
          }, {
            "date": "2013-01-21",
            "market1": 83,
            "market2": 85,
            "sales1": 3,
            "sales2": 5
          }, {
            "date": "2013-01-22",
            "market1": 88,
            "market2": 92,
            "sales1": 5,
            "sales2": 7
          }, {
            "date": "2013-01-23",
            "market1": 85,
            "market2": 90,
            "sales1": 7,
            "sales2": 6
          }, {
            "date": "2013-01-24",
            "market1": 85,
            "market2": 91,
            "sales1": 9,
            "sales2": 5
          }, {
            "date": "2013-01-25",
            "market1": 80,
            "market2": 84,
            "sales1": 5,
            "sales2": 8
          }, {
            "date": "2013-01-26",
            "market1": 87,
            "market2": 92,
            "sales1": 4,
            "sales2": 8
          }, {
            "date": "2013-01-27",
            "market1": 84,
            "market2": 87,
            "sales1": 3,
            "sales2": 4
          }, {
            "date": "2013-01-28",
            "market1": 83,
            "market2": 88,
            "sales1": 5,
            "sales2": 7
          }, {
            "date": "2013-01-29",
            "market1": 84,
            "market2": 87,
            "sales1": 5,
            "sales2": 8
          }, {
            "date": "2013-01-30",
            "market1": 81,
            "market2": 85,
            "sales1": 4,
            "sales2": 7
          }],
          pathToImages: layoutPaths.images.amChart
        });
      }
    }
  }
</script>
<style></style>

